<script setup lang="ts">
import type { ValidateError } from 'async-validator';

const props = withDefaults(
  defineProps<{
    type: 'text' | 'password';
    lable: string;
    error?: ValidateError[];
    modelValue?: string;
    toggle?: boolean;
  }>(),
  {
    type: 'text',
  },
);
const type = ref(props.type);
</script>

<template>
  <div class="input">
    <input :type="type" :placeholder="lable" :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
    <ul>
      <li v-for="item in error" :key="item.message">{{ item.message }}</li>
    </ul>
    <SvgIcon v-show="toggle && type === 'password'" name="icon-noeye" @click="type = 'text'"></SvgIcon>
    <SvgIcon v-show="toggle && type === 'text'" name="icon-eye" @click="type = 'password'"></SvgIcon>
  </div>
</template>

<style lang="scss" scoped>
.input {
  margin: 20rem 0;
  position: relative;

  input {
    width: 315rem;
    height: 40rem;
    font-size: 20rem;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--border-color);
  }
  ul {
    margin: 5rem;
    padding: 0;
    list-style: none;
    font-size: 14rem;
    li {
      color: var(--warning-color);
    }
  }
  svg {
    position: absolute;
    top: 10rem;
    right: 25rem;
    font-size: 20rem;
  }
}
</style>
